<?php

namespace App\Admin\Controllers;

use App\Http\Controllers\Controller;
use App\NaiveUI\Grid;
use LowCode\Block;
use LowCode\Page;
use LowCode\Store;
use LowCode\Support\Js;
use LowCode\Support\JsDs;
use LowCode\Support\JsExp;
use LowCode\UI;

class HomeController extends Controller
{
    public function index()
    {
        Store::make()->state("www","哈哈哈哈");
        $block = Block::make("HomeBlock", function (Block $block){
            $data = [
                ["category"=>"分类1","color"=>"红色","productName"=>"华为1","price"=>"100001","releaseDate"=>date("Y-m-d H:i:s"),"images"=>[
                    'https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg',
                    'https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg',
                ]],
                ["category"=>"分类2","color"=>"绿色","productName"=>"华为2","price"=>"100002","releaseDate"=>date("Y-m-d H:i:s"),"images"=>[]],
                ["category"=>"分类3","color"=>"蓝色","productName"=>"华为3","price"=>"100003","releaseDate"=>date("Y-m-d H:i:s"),"images"=>[]],
                ["category"=>"分类4","color"=>"白色","productName"=>"华为4","price"=>"100004","releaseDate"=>date("Y-m-d H:i:s"),"images"=>[]],
            ];
            $block->states(["test"=>222,"msg"=>"红红火火恍恍惚惚看看打卡","items"=>[1,2,3,4],'data'=>$data]);
            $block->computed("abc","()=>state.test");
//            $block->watch(JsExp::make("abc"),"()=>{console.log(abc)}");
            $block->method("onTest", "()=>{console.log('测试1',this);}");
//    $block->addWatch(JsExp::make("()=>state.test"), JsFn::make("()=>{console.log('监听',this)}"));
            $block->mounted("()=>{console.log('挂载完成',this)}");
            $block->prop("test", ["Number","Boolean"], false, 0);
//    $block->dataSource("test2", JsDs::make("test2",uuid_create(),"api"));
//            $block->inject("appConfig", ["test"]);
//            $block->inject("message", JsExp::make("window.message"));
            $title = UI::title("控制台",3)->prefix();
            $tabs = UI::tabs()->displayDirective("show:lazy");
            $codeStr = <<<PHP
<?php
\$a = 1;
function test() {
    echo 123456;
}
\$b = 1;
PHP;
            $htmlCode = file_get_contents(resource_path("views/welcome.blade.php"));
            $text = htmlspecialchars($htmlCode);
$code = "<pre><code class='language-html'>$text</code></pre>";
            $block->state("code",$code);
            $block->state("codeStr", $codeStr);
            $block->state("border", 'inner');
            $tabs->tab("测试",[
//                UI::node("WAlova")->prop("url","/components")->prop("immediate",true),
                UI::input()->vModelArg("value", "state.msg"),
                UI::node("WAction")->props([
                    "title"=>"金合欢花",
                    "content"=>"内容",
                ])->children(UI::button("测试")),
                UI::button("打开弹窗")->onClick("()=>{this.\$dialog.success({title:'金合欢花',content:'哈哈哈哈哈'})}"),
                UI::node("WModal")->prop("title","弹窗标题")
//                    ->children(UI::node("Iframe")->prop("src",url("/"))->class("wh-full"))
                    ->children(UI::node("div")->style("height","1200px")->class("w-full")->children("对对对"))
                    ->addSlot(UI::button("测试1"),"action")
                    ->addSlot(UI::button("测试2"),"footer")
                    ->prop("scrollbar", true)
                    ->prop("width", 800)
                    ->prop("height", 700)
                    ->state("showModel", false)
                    ->vModel("state.showModel"),
                UI::button("打开弹窗")->onClick("()=>{state.showModel=true}"),
//                UI::node("WAttachment"),
//                UI::node("JsonPretty")->prop("data",["test"=>1])->prop("showLineNumber",true)->prop("editable",true),
                UI::node("WForm")->children([
                    UI::node("WFormField")->props([
                        "component"=>"Input",
                        "componentProps"=>["placeholder"=>"请输入姓名"],
                        "fieldName"=>"name",
                        "label"=>"姓名",
                        "rules"=>"required"
                    ]),
                    UI::node("WFormField")->props([
                        "component"=>"Divider",
                        "fieldName"=>"__divider__",
                    ]),
                    UI::node("WFormField")->props([
                        "component"=>"Input",
                        "componentProps"=>["placeholder"=>"请输入用户名"],
                        "fieldName"=>"username",
                        "label"=>"用户名",
                        "rules"=>"required"
                    ]),
                    UI::node("WFormField")->props([
                        "component"=>"WUpload",
                        "componentProps"=>[
//                            "list-type"=>"image-card",
                            "show-download-button"=>true,
                            "list-type"=>"image",
//                            "drag"=>true,
                        ],
                        "fieldName"=>"avatar",
                        "label"=>"头像",
                        "formItemClass"=>"items-start",
//                        "rules"=>"required"
                    ]),
                ])
                    ->prop("commonConfig",[

                    ])
//                    ->prop("collapsed",false)
                    ->prop("showDefaultActions",true)
//                    ->prop("showCollapseButton",true)
                    ->prop("resetButtonOptions",["content"=>"重置"])
                    ->prop("submitButtonOptions",["content"=>"查询"])
                    ->prop("wrapperClass",'grid-cols-1 md:grid-cols-2 lg:grid-cols-3')
                    ->prop("actionWrapperClass",'text-left pl-8'),
//                UI::node("WTable")->vBind("data", "state.data")->prop("showFilterFixed",true)->children([
//                    UI::node("WTableColumn")->prop("title","序号")->prop("type","selection")->prop("multiple",false),
//                    UI::node("WTableColumn")->prop("title","分类")->prop("width",200)->prop("field","category"),
//                    UI::node("WTableColumn")->prop("title","颜色")->prop("width",200)->prop("field","color"),
//                    UI::node("WTableColumn")->prop("title","产品名称")->prop("width",200)->prop("field","productName"),
//                    UI::node("WTableColumn")->prop("title","产品名称")->prop("width",200)->prop("field","productName")->prop("renderType","qrcode"),
//                    UI::node("WTableColumn")->prop("title","价格")->prop("width",200)->prop("field","price"),
//                    UI::node("WTableColumn")->prop("title","图片")->prop("width",200)->prop("align","center")->prop("titleAlign","center")->prop("field","images")
//                        ->prop("renderType","images")->prop("renderProps",[
////                            "showMore"=>false
//                            "width"=>"120px",
//                            "height"=>"80px"
//                        ])->prop("titleAlign","center"),
//                    UI::node("WTableColumn")->prop("title","Date")->prop("width",200)->prop("field","releaseDate"),
//                ]),
//                UI::node("WCrud")
//                ->children(UI::node("WCrudGrid")->prop("keepSource", true)->prop("border", 'inner')->prop("columns",[
//                    ["title"=>"序号","type"=>"seq","width"=>50,"align"=>"center"],
//                    ["title"=>"","type"=>"checkbox","width"=>100,"align"=>"left"],
//                    ["field"=>"category","title"=>"分类"],
//                    ["field"=>"color","title"=>"颜色"],
//                    ["field"=>"productName","title"=>"产品名称"],
//                    ["field"=>"price","title"=>"价格"],
//                    ["field"=>"images","title"=>"图片","cellRender"=>[
//                        "name"=>"CellImageGroup",
//                        "props"=>[
//                            "width"=>"58",
//                            "height"=>"38",
//                        ]
//                    ]],
//                    ["field"=>"releaseDate","title"=>"Date"],
//                ])->prop("data",[
//                    ["category"=>"分类1","color"=>"红色","productName"=>"华为1","price"=>"100001","releaseDate"=>date("Y-m-d H:i:s"),"images"=>[
//                        'https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg',
//                        'https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg',
//                    ]],
//                    ["category"=>"分类2","color"=>"绿色","productName"=>"华为2","price"=>"100002","releaseDate"=>date("Y-m-d H:i:s"),"images"=>[]],
//                    ["category"=>"分类3","color"=>"蓝色","productName"=>"华为3","price"=>"100003","releaseDate"=>date("Y-m-d H:i:s"),"images"=>[]],
//                    ["category"=>"分类4","color"=>"白色","productName"=>"华为4","price"=>"100004","releaseDate"=>date("Y-m-d H:i:s"),"images"=>[]],
//                ]))
//                ,
//                UI::node("MonacoEditor")
//                    ->prop("language","php")
//                    ->prop("monacoPath",asset("assets/monaco-editor"))
//                    ->prop("languages",['html','javascript','css','php'])->vModel("state.codeStr"),
//                UI::node("WEditor")->prop("options",[
//                    "ai"=>[
//                        "models"=>[
//                            "openai"=>[
//                                "apiKey"=>""
//                            ]
//                        ]
//                    ]
//                ])->vModel("state.htmlText")->state("htmlText","<div>哈哈哈哈哈</div>"),
//                UI::node("CodeAction")->prop("language","php")->state("codeStr", $codeStr)->vModel("state.codeStr")
//                    ->slotDefault(UI::code(\jsExp("state.codeStr"))->componentName("SkCode"))
//                ->addSlot(UI::node("CodeEditor")->vModel("state.codeStr")->style("height","100%"),"editor"),
//                UI::node("WPlayer")->prop("controls",true)->prop("url","https://s2.pstatp.com/cdn/expire-1-M/byted-player-videos/1.0.0/xgplayer-demo.mp4"),
//                UI::node("MarkdownEditor"),
//                UI::node("CodeAction")->vModelArg("code","state.codeStr")->prop("language","php"),
//                UI::node("WEditor")->prop("width","90%"),


//                UI::node("WCkeditor")->vModel("state.code")->prop("height","300px")->prop("min-height","300px"),
//                UI::buttonIcon()->icon("mdi:home")->tooltip("哈哈哈哈哈"),
                UI::rate(3),
                UI::link("百度网站")->href("https://www.baidu.com"),
                UI::buttonGroup([
                    UI::routerLink([
                        "name"=>"Home",
                        "query"=>["test"=>1]
                    ])->button("跳转参数query test=1","default"),
                    UI::routerLink([
                        "name"=>"Home",
                        "query"=>["test"=>2]
                    ])->button("跳转参数query test=2"),

                    UI::button("查询Route")->onClick("()=>{console.log(this.\$route)}")
                ]),
                UI::divider(),
//                UI::code(\jsExp("state.codeStr"))->showLineNumbers(),
//                UI::code(\jsExp("state.codeStr"))->componentName("SkCode")->prop("cdnUrl","https://esm.sh/shiki@1.20.0"),
//                UI::divider(),
//                UI::div([
//                    UI::flex([
//                        UI::imageGroup([
//                            UI::carousel([
//                                UI::image(jsExp("`https://naive-ui.oss-cn-beijing.aliyuncs.com/carousel-img/carousel\${(index+1)}.jpeg`"))->vFor(4),
////                                UI::el()->tag("img")->prop("src",jsExp("`https://naive-ui.oss-cn-beijing.aliyuncs.com/carousel-img/carousel\${(index+1)}.jpeg`"))->styles(["object-fit"=>"fill"])->vFor(4),
//                            ])->class("w-550px h-250px")->showArrow()->autoplay()->interval(3000)->effect("slide"),
////                            'slide' | 'fade' | 'card' | 'custom'
//                        ]),
//                        UI::qrCode("红红火火恍恍惚惚哈哈哈哈")->ref("qrcode"),
//                        UI::button("下载")->onClick(Js::downloadFromCanvasRef("qrcode")),
//                    ]),
//                ])->class("my-3"),
            ]);
//            $tabs->tab("菜单",[
//                UI::flex([
//                    UI::menu([
//
//                    ])
//                ])
//            ]);
            $tabs->tab("栅格布局",Grid::example());
            $tabs->tab("HTML",[
                UI::div("0顶顶顶顶孤寡孤寡孤寡顶顶顶顶.0")->class("bg-red text-white m-3 p-2"),
                UI::span("和荷兰的你"),
                UI::html("<b>和荷兰的你</b>"),
            ]);
            $tabs->tab("UI",[
                UI::fromUrl("/admin-api/components", "TestComponent"),
                UI::fromSchema("NewBlock")->register($block->id, function (Block $block){
                    $block->nodes([UI::div([
                        UI::div("新板块"),
                        UI::button("新板块按钮")->secondary()->error(),
                    ])]);
                }),
                UI::node("NButtonGroup")->children([
                    UI::button("哈哈哈哈")->primary(),
                    UI::routerLink("/analytics")->children(UI::button("跳转分析页")->warning()),
                    UI::routerLink("/naive/index")->children(UI::button("跳转naive例子")->info()),
                ]),
            ]);
//            $tabs->tab("表单",[
//                Naive::input()->class("my-2"),
//            ]);

            $tabs->tab("SfcRender",[
                UI::sfcRender()->devMode(true)
            ]);
            $isElement = request()->header("element-plus");
            if ($isElement){
                $block->nodes([
                    UI::div("ElementPlus")
                ]);
            }else{
                $block->nodes([
//                UI::fromPlugin([
//                    url("assets/home.js")
//                ],"HomeTest"),
                    UI::card($title,$tabs)->class("m-3")
                ]);
            }


            $block->addDataSourceFromApi("test","/test");
//            $api = JsApi::make("test","/test");
//            $block->addApi($api)->dataSource("test",JsDs::make($api->id));

        });
        $page = Page::make($block);
//        Store::make()->addDependencies()
//        $page->addDependencies(Dependencies::make("naive","2.39.0","naive",[
//            "https://unpkg.com/naive-ui@2.39.0/dist/index.js"
//        ])->required(true)->enabled(true));
//        $page->addDependencies("vue3-sfc-loader","",[
//
//        ]);
//        $page->addDependencies(Dependencies::make("vue3-sfc-loader","latest","vue3-sfc-loader",[
//            "https://cdn.jsdelivr.net/npm/vue3-sfc-loader/dist/vue3-sfc-loader.js"
//        ])->required(true)->enabled(true));
//        $page->addDependencies(Dependencies::make("ElementPlus","2.8.2","ElButton",[
//            "https://unpkg.com/element-plus@2.8.2/dist/index.full.js",
//            "https://unpkg.com/element-plus@2.8.2/dist/index.css",
//        ])->required(true)->enabled(true));
//    \Illuminate\Support\Benchmark::dd([98
//        "page"=>fn()=> Page::make($block)
//    ]);
//        https://unpkg.com/naive-ui@2.39.0/dist/index.js
//        $page->addCss("https://unpkg.com/element-plus@2.8.2/dist/index.css");
//        $page->addJs("https://unpkg.com/element-plus@2.8.2/dist/index.full.js");
//        $page->addScript(<<<JS
//    console.log(proxy)
//    window.initApp((app, isRegister)=>{
//        if (!isRegister('ElButton')){
//            app.use(window.ElementPlus)
//        }
//        console.log(app)
//    })
//JS);
        return $this->result($page);
    }

    public function component()
    {
        $block = Block::make("block",function (Block $block){
            $block->inject("message", JsExp::make("window.message"));
            $block->dataSource("test2", JsDs::make("test2"));
            $el = UI::div("自定义远程组件");
            $block->created(<<<JS
()=>{console.log(this.message)}
JS);
            $block->nodes([$el]);
        });

        return response()->json($block);
    }



    public function views()
    {
        return view("components.test");
    }

    public function about()
    {
        $block = Block::make("AnalyticsBlock", function (Block $block){
            $block->nodes([
                UI::about()
            ]);
        });
        $page = Page::make($block);
        return $this->result($page);
    }

    public function install()
    {
        $block = Block::make("InstallBlock", function (Block $block){
            $block->nodes([
                UI::about()
            ]);
        });
        $page = Page::make($block);
        return $this->result($page);
    }
}
